<template>
  <div class="edit-profile">
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="onClickLeft"
    />
    
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="formData.nickname"
          name="nickname"
          label="昵称"
          placeholder="请输入昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <van-field
          v-model="formData.phone"
          name="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="formData.email"
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
        />
        <van-field
          v-model="formData.introduction"
          name="introduction"
          label="个人简介"
          type="textarea"
          rows="3"
          autosize
          placeholder="请输入个人简介"
        />
      </van-cell-group>

      <div class="submit-btn">
        <van-button round block type="primary" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

const formData = ref({
  nickname: '张三',
  phone: '13800138000',
  email: 'zhangsan@example.com',
  introduction: ''
})

const onClickLeft = () => {
  router.back()
}

const onSubmit = (values) => {
  console.log('submit', values)
  // TODO: 调用接口保存数据
  showToast('保存成功')
  router.back()
}
</script>

<style lang="scss" scoped>
.edit-profile {
  min-height: 100vh;
  background-color: #f7f8fa;
  
  .submit-btn {
    margin: 16px;
  }
}
</style>
